import React, { useState } from 'react'
import { Input, Button, Cell } from '@nutui/nutui-react'
import { Uploader } from 'react-vant'
import axios from 'axios'
import { IconFont } from '@nutui/icons-react'
import { NavBar, Toast } from '@nutui/nutui-react'
import { ArrowLeft, Phone, Comment,User,Retweet ,Lock } from '@nutui/icons-react'
import { useNavigate } from 'react-router-dom'


export default function Register() {
  let Navigate=useNavigate()
  let [obj, setObj] = useState({
    name: "",
    nickname: "",
    gender: "",
    phone: "",
    photo: [],
  })
  // 上传图片
  let [photo] = useState([])
  const upload = async (file) => {
    if (file.length > 0) {
      const formData = new FormData()
      formData.append('file', file[0].file)
      // 发送POST请求，如果请求成功执行修改头像操作
      let { data } = await axios.post('http://127.0.0.1:3000/lxj/upload', formData)
      setObj({ ...obj, photo: data.path })
    }
  }
  // 注册
  const register = async () => {
    let { data } = await axios.post('http://127.0.0.1:3000/lxj/lxj_register', obj)
    Navigate('/login')
    Toast.show('注册成功')
  }
  return (
    <div>
      <NavBar
        style={{

          backgroundColor: "transparent",
        }}
        back={
          <>
            <ArrowLeft />
            返回登录
          </>
        }
        onBackClick={(e) => Toast.show('返回')}
      >
      </NavBar>

      <h3 style={{ margin: '0 10vw' }} >用户注册</h3>
      <div style={{
        margin: "5vw auto",
        // backgroundImage:'url(./注册背景.jpg)',
        backgroundSize: '100% 100%',
        height: '70vh',
      }}>
        <div style={{
          margin: "5vw auto",
          width: '80vw',
          height: '100%',
          // background: 'aqua',
          padding: '2%',
          borderRadius: '10px',
          border: '1px solid #cecece',
        }}>
          {/* 注册：性别，用户名，昵称，手机号，（还有谁需要其他的注册信息群里沟通），注册判断是否已经注册过 */}
          <Cell style={{
            padding: '0',
            margin: '5vw 0',
          }}>
            <User style={{ position: 'relative', top: '2vh', left: "3vw", zIndex: '10', }} />
            <Input type="text" placeholder='请输入用户名' onChange={(e) => { setObj({ ...obj, name: e }) }} />
          </Cell>
          <Cell style={{
            padding: '0',
            margin: '5vw 0',
          }}>
            <Comment style={{ position: 'relative', top: '2vh', left: "3vw", zIndex: '10', }} />
            <Input type="text" placeholder='请输入昵称' onChange={(e) => { setObj({ ...obj, nickname: e }) }} />
          </Cell>
          <Cell style={{
            padding: '0',
            margin: '5vw 0',
          }}>
            <Phone style={{ position: 'relative', top: '2vh', left: "3vw", zIndex: '10', }} />
            <Input type="text" placeholder='请输入手机号' onChange={(e) => { setObj({ ...obj, phone: e }) }} />
          </Cell>
          <Cell style={{
            padding: '0',
            margin: '5vw 0',
          }}>
            <Retweet style={{ position: 'relative', top: '2vh', left: "3vw", zIndex: '10', }} />
            <Input type="text" placeholder='请输入性别' onChange={(e) => { setObj({ ...obj, gender: e }) }} />
          </Cell>
          <Cell
            style={{
              padding: '0 0 0 7vw',
              margin: '5vw 0',
              display: 'block',
            }}>
            <span>请选择头像:</span>
            <br></br>
            <Uploader
              Value={photo}
              maxCount={1}
              action='http://127.0.0.1:3000/lxj/upload'
              onChange={(e) => upload(e)}
            />
          </Cell>
          <br></br>
          <div style={{
            width: '100%',
            textAlign: 'center'
          }}>
            <Button style={{
              width: '200px',
              height:'40px',
              borderRadius: '5px'
            }} type='warning' onClick={() => register()}>注册</Button>
          </div>
        </div>
      </div>
    </div>
  )
}
